export type SvgConfig = {
    'data_source_list': DataSourceUnion[],

    'svg_elements': SVGElement[][]
}

// Data Sources types ===================
// !

export type DataSourceUnion = (DataSource | DataSourceGroup)

export type DataSource = {
    'type': 'DS';
    'axis_type': { x: AxisType, y: AxisType };
    
    'id': string;
    'array_key': string;
    'x_key': string;
    'y_key': string;

    'x_reverse'?: boolean;
    'y_reverse'?: boolean;
    'nice'?: { x?:boolean, y?: boolean };
    'domain'?: { x?: number[] | string[], y?: number[] | string[] }
};

export type DataSourceGroup = {
    'type': 'DSG';

    'axis_type': { x: AxisType, y: AxisType };

    'id': string,
    'data_sources': DataSourceItem[];

    'x_reverse'?: boolean;
    'y_reverse'?: boolean;
    'nice'?: { x?:boolean, y?: boolean };
    'domain'?: { x?: number[] | string[], y?: number[] | string[] }
};

export type DataSourceItem = {
    'id': string;
    'array_key': string;
    'x_key': string;
    'y_key': string;
};

export type AxisType = 'Date' | 'Liner';

export type UnionType = 'X' | 'Y' | 'All' | 'None';

// !
// Data Sources types ===================

// SVG Elements types ===================
// !

export type SVGElement = (ChartSetting | MinMaxInfoSetting | TextSetting)

export type TextSetting = {
    'type': 'Text',

    'id': string;
    'width': number;
    'height': number;
    'margin': Margin;

    'text': string;
    'font_family'?: 'times new roman' | 'arial';
    'font_weight'?: string; 
    'font_size'?: number;
}

export type ChartSetting = {
    'type': 'Chart';

    'id': string;
    'width': number;
    'height': number;
    'margin': Margin;

    'chart_elements':  (XAxis | YAxis | Line | MinMaxPoints | LegendInner)[];
}

export type MinMaxInfoSetting = {
    'type': 'MinMaxInfo';

    'id': string;
    'width': number;
    'height': number;
    'margin': Margin;

    'rows': (MixMaxInfoRow | MinMaxLabelRow)[];
}

export type Margin = {
    'top': number;
    'left': number;
    'right': number;
    'bottom': number;
}

// !
// SVG Elements types ===================

// Rows types ===========================
// !

export type MixMaxInfoRow = {
    'type': 'MixMaxInfoRow';
    'data_id': string;
    'scale_x_id': string;
    'font_family'?: 'times new roman' | 'arial';
    'font_size'?: number;
    'color'?: string;
}

export type MinMaxLabelRow = {
    'type': 'MinMaxLabelRow',
    'data_id': 'dsg_1:ds_2', 
    'scale_x_id': 'dsg_1',
    'font_family'?: 'times new roman' | 'arial';
    'font_size'?: number;
}

// !
// Rows types ===========================

// Chart Elements types =================
// !

export type XAxis = {
    'type': 'XAxis';
    'data_id': string;
    'scale_id': string;
    'label'?: string;
    'ticks'?: number | string;
    'font_family'?: 'times new roman' | 'arial';
    'font_weight'?: string; 
    'font_size'?: number;
    'last_value'?: boolean;
    'date_format'?: 'month_number_short' | 'month_string_short';
    'remove_domain'?: boolean;
    'remove_line'?: boolean;
    'horizontal_line'?: boolean;
}

export type YAxis = {
    'type': 'YAxis';
    'data_id': string;
    'scale_id': string;
    'label'?: string;
    'ticks'?: number | string;
    'font_family'?: 'times new roman' | 'arial';
    'font_weight'?: string; 
    'font_size'?: number;
    'last_value'?: boolean;
    'date_format'?: 'month_number_short' | 'month_string_short';
    'remove_domain'?: boolean;
    'remove_line'?: boolean;
    'horizontal_line'?: boolean;
}

export type Line = {
    'type': 'Line';
    'data_id': string;
    'scale_x_id': string;
    'scale_y_id': string;
    'strokeWidth'?: number;
    'color'?: string;
}

export type MinMaxPoints = {
    'type': 'MixMaxPoints',
    'data_id': string;
    'scale_x_id': string;
    'scale_y_id': string;
    'font_family'?: 'times new roman' | 'arial';
    'font_weight'?: string; 
    'font_size'?: number;
    'radius'?: number; 
    'color'?: string;
    'last_point'?: boolean;
}

export type LegendInner = {
    'type': 'LegendInner',
    'position': { 'x': number, 'y': number };
    'font_family'?: 'times new roman' | 'arial';
    'font_weight'?: string; 
    'font_size'?: number;

    'legends': { 'color': string, 'text': string }[];
}

// !
// Chart Elements types =================

